<template>
	<view class="container">
		<view :class="['message', message.sender === 'customer' ? 'right' : 'left']">
			<view class="header-content">
				<image :src="message.avatar" mode="" v-if="message.sender == 'customer_service'"></image>
				<view class="content">{{ message.content }}</view>
				<image :src="message.avatar" mode="" v-if="message.sender == 'customer'"></image>
			</view>
			<view class="time">{{ message.time }}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			message:Object
		}
	}
</script>
<style scoped>
	.message {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 10px;
		padding: 10px;
	}

	.message.left {
		align-items: flex-start;
	}

	.message.right {
		align-items: flex-end;
	}

	.content {
		background-color: #e7e7e7;
		border-radius: 10rpx;
		padding: 16rpx;
		margin: 16rpx;
		word-wrap: break-word;
		word-break: break-all;
	}

	.time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}
	image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
	}
	.header-content{
		display: flex;
		align-items: center;
	}
</style>